<template>
	<view class="container">
		<view class="inputBox">
			<input type="text" 
			placeholder="请输入搜索内容" 
			class="in" 
			@focus="up()"
			@blur="down()"
			v-model="inputValue"/>
		</view>
		<view class="searchBox" @click="show();">
			<image class="icon" src="../../static/sousuo-2.png" mode="aspectFit"></image>
		</view>
		<image src="../../static/小鸡仔.png" 
		class="iconA"
		mode="aspectFit" v-if="type==0" :class=" { up: p, down: !p}" />
		<image src="../../static/icon/蝙蝠.png"
		class="iconB"
		mode="aspectFit" v-if="type==1" :class=" { upA: p, downA: !p}"/>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
const inputValue = ref("");
// 定义组件的props
const props = defineProps({
  type: {
    type: Number,
    default(){return 0;}
  },
});
defineExpose({
	inputValue,
})
const emit = defineEmits(["search"])
function show()
{
	emit("search",{value:inputValue.value});
}
// 小鸡升降相关
const p = ref(false);
function up(){
	console.log("向上")
	p.value = true;
}
function down(){
	console.log("向下")
	p.value = false;
}
</script>

<style lang="scss" scoped>
.icon{
	height: 50rpx;
	width: 50rpx;
}
.iconA{
	position: absolute;
	left: 50%;
	top:40%;
	height: 50rpx;
	width: 50rpx;
	transform: translate(-50%,-50%);
	z-index: 0;
}
.up{
	transform: translate(-50%,-140%);
	transition: transform 0.5s ease;
}
.down{
	transform: translate(-50%,-50%);
	transition: transform 0.5s ease;
}
.iconB {
    position: absolute;
    left: 10%;
    top: 40%;
    height: 80rpx;
    width: 80rpx;
    /* 先平移，再旋转 */
    transform: translate(-50%, -50%) rotate(180deg);
    transform-origin: 50% 50%;
    z-index: 0;
}
.upA{
	transform: translate(-50%,30%) rotate(180deg);
	transition: transform 0.5s ease;
}
.downA{
	transform: translate(-50%,-50%) rotate(180deg);
	transition: transform 0.5s ease;
}
.inputBox{
	z-index: 1;
	display:flex;
	width: 600rpx;
	height: 70rpx;
	opacity: 1;
	border-radius: 50rpx;
	background:  rgba(240, 240, 240, 1.0);
	align-items: left;
	justify-content: left;
	margin-right: 30rpx;
	.in{
		height: 100%;
		font-size: 35rpx;
		margin-left: 40rpx;
	}
}
.container {
	margin-top: 20rpx;
	background-color: transparent;
	position: relative;
	display:flex;
	align-items: center;
    flex-direction:row;
	margin: 10rpx;
}

.searchBox{
	z-index: 1;
	display:flex;
	align-items: center;
	justify-content: center;
	width: 70rpx;
	height: 70rpx;
	opacity: 1;
	border-radius: 30rpx;
	background: rgba(240, 240, 240, 1.0);
}

</style>
